<template>
  <div class="main">
    <div class="part single">
      <div class="p-title">
        <div class="title">保障概览</div>
        <div class="search">
          <myDestSelect ref="destSelectRef" @destChange="destChange" />
          <myDateRangeSelect
            ref="dateSelectRef"
            @dateRangeChange="dateRangeChange"
          />
        </div>
      </div>
      <div class="p-cont">
        <div class="drug">
          <!-- <div class="title">
            管理居民总数 (人）
            <span>17126</span>
          </div> -->
          <div class="user-panel">
            <div
              :class="[
                'up-item',
                'up-item-5',
                overviewSelectedPanel.includes(1) ? 'active' : ''
              ]"
              @click="changeOverviewSelectedPanel(1)"
            >
              <div class="up-des">
                <span>新增保障 （人）</span>
                <MyToolTip
                  content="指标定义：筛选日期内，新增加的获得大病保障的人数"
                />
              </div>
              <div class="up-num">
                {{ formatNum(indexValue.newInsuranceCount) }}
              </div>
              <!-- <div class="up-inc">
                <div class="up-inc-left">
                  <span>环比</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="green"
                  />
                  <span class="green">12.5%</span>
                </div>
                <div class="up-inc-right">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div> -->
            </div>
            <div
              :class="[
                'up-item',
                'up-item-5',
                overviewSelectedPanel.includes(2) ? 'active' : ''
              ]"
              @click="changeOverviewSelectedPanel(2)"
            >
              <div class="up-des">
                <span>在保人数 (人次)</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期当天，仍处于大病保障中的人数"
                />
              </div>
              <div class="up-num">
                {{ formatNum(indexValue.inInsuranceCount) }}
              </div>
              <!-- <div class="up-inc">
                <div class="up-inc-left">
                  <span>环比</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="red"
                  />
                  <span class="red">12.5%</span>
                </div>
                <div class="up-inc-right">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div> -->
            </div>
            <div
              :class="[
                'up-item',
                'up-item-5',
                overviewSelectedPanel.includes(3) ? 'active' : ''
              ]"
              @click="changeOverviewSelectedPanel(3)"
            >
              <div class="up-des">
                <span>累计保障人数（人）</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有获得过大病保障的绝对总人数"
                />
              </div>
              <div class="up-num">
                {{ formatNum(indexValue.cumulativeInsuredCount) }}
              </div>
            </div>
            <div
              :class="[
                'up-item',
                'up-item-5',
                overviewSelectedPanel.includes(4) ? 'active' : ''
              ]"
              @click="changeOverviewSelectedPanel(4)"
            >
              <div class="up-des">
                <span>出险人数（人次）</span>
                <MyToolTip
                  content="指标定义：筛选日期内，所有确认出险并获得保障报销的人数"
                />
              </div>
              <div class="up-num">
                {{ formatNum(indexValue.insuranceAccidentCount) }}
              </div>
            </div>
            <div
              :class="[
                'up-item',
                'up-item-5',
                overviewSelectedPanel.includes(5) ? 'active' : ''
              ]"
              @click="changeOverviewSelectedPanel(5)"
            >
              <div class="up-des">
                <span>额外报销（元）</span>
                <MyToolTip
                  content="指标定义：筛选日期内，获得大病保障报销的总金额数"
                />
              </div>
              <div class="up-num">
                {{ formatNum(indexValue.reimbursementAmount) }}
              </div>
              <!-- <div class="up-inc">
                <div class="up-inc-left">
                  <span>环比</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="green"
                  />
                  <span class="green">12.5%</span>
                </div>
                <div class="up-inc-right">
                  <el-icon><ArrowRight /></el-icon>
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="trend">
          <!-- <div class="title">趋势分析(人)</div> -->
          <div class="trend-content">
            <div class="tc-left">
              <div class="tc-btn">
                <el-button type="primary">导出详情数据</el-button>
                <el-button-group class="ml-4">
                  <el-button
                    :type="dateType === 1 ? 'primary' : 'default'"
                    @click="changeDateType(1)"
                    plain
                    >按日</el-button
                  >
                  <el-button
                    :type="dateType === 2 ? 'primary' : 'default'"
                    @click="changeDateType(2)"
                    plain
                    >按周</el-button
                  >
                  <el-button
                    :type="dateType === 3 ? 'primary' : 'default'"
                    @click="changeDateType(3)"
                    plain
                    >按月</el-button
                  >
                </el-button-group>
              </div>

              <div class="tc-line" ref="trendLineRef" />
            </div>
            <!-- <div class="tc-right">
              <div class="tc-r-item">
                <div class="tc-r-title">管理金额规模 (元)</div>
                <div class="tc-r-num">872,192,722</div>
                <div class="tc-r-inc">
                  <span>自从上周以来</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="green"
                  />
                  <span class="green">12.5%</span>
                </div>
              </div>
              <div class="tc-r-item">
                <div class="tc-r-title">避免再住院金额 (元)</div>
                <div class="tc-r-num">
                  {{ formatNum(indexValue[1] && indexValue[1].value) }}
                </div>
                <div class="tc-r-inc">
                  <span>自从上周以来</span>
                  <IconifyIconOnline
                    icon="material-symbols:arrow-circle-down-outline-rounded"
                    width="20px"
                    height="20px"
                    class="red"
                  />
                  <span class="red">12.5%</span>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="part">
      <div class="section">
        <div class="title">
          在保居民画像
          <!-- <span>17126</span> -->
        </div>
        <div class="trend">
          <!-- <div class="title">趋势分析(人)</div> -->
          <div class="trend-content">
            <div class="tc-left">
              <div class="tc-title">
                <span>年龄分布</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有在保用户所属的各年龄层的人数分布情况"
                />
              </div>
              <!-- <div class="tc-btn">
                <el-button
                  plain
                  :type="memberDataType === 'num' ? 'primary' : 'default'"
                  @click="changeMemberDataType"
                  >按年龄</el-button
                >
                <el-button
                  plain
                  :type="memberDataType === 'medical' ? 'primary' : 'default'"
                  @click="changeMemberDataType"
                  >按疾病</el-button
                >
              </div> -->

              <div class="tc-line" ref="memberDataRef" />
            </div>
            <div class="tc-right">
              <div class="tc-title">
                <span>平均合并症个数：{{ avgComorbidityNum }}个</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有在保用户所患疾病的数量平均到每个风控用户的病症数量；该数字越小代表用户整体疾病种类越少，风险越可控。\n同时配套显示单个用户拥有病症数量的分布情况"
                />
              </div>
              <div class="trend-pie" ref="trendPieRef" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="part">
      <div class="section">
        <div class="title">
          出险报销分析
          <!-- <span>17126</span> -->
        </div>

        <div class="chart chart-one">
          <div class="chart-title">
            <span>出险居民疾病分布</span>
            <MyToolTip
              content="指标定义：筛选日期内，所有已出险的用户的大病分布情况"
            />
          </div>
          <div class="now-analyse" ref="diseaseDistributeRef" />
        </div>
        <div class="chart">
          <div class="chart-left chart-item">
            <div class="chart-title">
              <span>出险居民年龄分布</span>
              <MyToolTip
                content="指标定义：筛选日期内，所有已出险的用户在出险时的年龄分布情况"
              />
            </div>
            <!-- <div class="ch-btns">
              <el-button plain>按人数</el-button>
              <el-button plain type="primary">按医疗支出</el-button>
            </div> -->
            <div class="ch-chart" ref="diseaseTrendChartRef" />
          </div>
          <div class="chart-right chart-item">
            <div class="chart-title">
              <span>保险报销金额分布</span>
              <MyToolTip
                content="指标定义：筛选日期内，已出险的保单获得报销赔付的金额分布情况"
              />
            </div>
            <!-- <div class="ch-btns">
              <el-button plain>按人数</el-button>
              <el-button plain type="primary">按医疗支出</el-button>
            </div> -->
            <div class="ch-chart" ref="diseaseMoneyChartRef" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref, onUnmounted } from "vue";
import { useECharts } from "@pureadmin/utils";
import * as echartsTypes from "echarts/types/dist/echarts";
import MyToolTip from "@/components/myToolTip.vue";

import {
  getInsuranceOverview,
  getInsuranceTrendData,
  getInInsuranceData
} from "@/api/bigDisease";
import { getPresentSituationByMoney } from "@/api/health_risk";
import { formatNum } from "@/utils/tools";
import { reactive } from "vue";
import { globalDataStoreHook } from "@/store/modules/globalData";
import myDestSelect, { destSelectType } from "@/components/myDestSelect.vue";
import myDateRangeSelect, {
  dateRangeType
} from "@/components/myDateRangeSelect.vue";
import { formatDate } from "@/utils/tools";
import { useUserStoreHook } from "@/store/modules/user";
const selectedCityId = ref(globalDataStoreHook().cityId);
const avgComorbidityNum = ref(0);
const store = useUserStoreHook();

// console.log("selectedCityId:", selectedCityId);

const destSelectRef = ref<destSelectType | null>(null);
const dateSelectRef = ref<dateRangeType>();
const dateType = ref<1 | 2 | 3>(1);

async function changeDateType(val) {
  console.log("val:", val);
  dateType.value = val;
  await getTrendLine();
  setTrendLineOption();
}

// 用户画像-健康比例 num为按人数，medical为按医疗支出

const trendLineRef = ref(null);
const memberDataRef = ref(null);
const trendPieRef = ref(null);
const diseaseDistributeRef = ref(null);
const diseaseTrendChartRef = ref(null);
const diseaseMoneyChartRef = ref(null);

let trendLineIns = null;
let inInsuranceIns = null;
let comorbidityPieIns = null;
let diseaseDistributeIns = null;
let diseaseTrendChartIns = null;
let diseaseMoneyChartIns = null;

// 新增保障
// const newInsuranceCountData = [];
// // 在保人数
// const inInsuranceCount = [];
// // 累计保障人数（
// const cumulativeInsuredCount = [];
// // 出险人数
// const insuranceAccidentCount = [];
// // 额外报销金额
// const reimbursementAmount = [];
// 趋势分析X轴坐标

const overviewSelectedPanel = reactive([1]);

function changeOverviewSelectedPanel(val) {
  // const index = overviewSelectedPanel.indexOf(val);
  // if (index > -1) {
  //   if (overviewSelectedPanel.length === 1) {
  //     return;
  //   } else {
  //     overviewSelectedPanel.splice(index, 1);
  //   }
  // } else {
  //   overviewSelectedPanel.push(val);
  // }
  overviewSelectedPanel.splice(0, 1, val);
  setTrendLineOption();
}

let trendLineData = {
  sections: [],
  newInsuranceCount: [], //新增保障（人）
  inInsuranceCount: [], //在保人数（人）
  cumulativeInsuredCount: [], //累计保障人数（人）
  insuranceAccidentCount: [], //出险人数（人次）
  reimbursementAmount: []
};

// 在保居民数据

const iiMemberData = ref({
  ages: [],
  complications: []
});

const trendLineDataOption = {
  title: {
    text: "趋势分析(人)",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },

  legend: {
    data: []
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },

  xAxis: {
    type: "category",
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "新增保障",
      type: "line",
      data: []
    }
  ]
};

function initTrendLine(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(trendLineDataOption as any);
  return getInstance();
}

enum overviewPanelType {
  newInsuranceCount = 1,
  inInsuranceCount,
  cumulativeInsuredCount,
  insuranceAccidentCount,
  reimbursementAmount
}

function setTrendLineOption() {
  const textNames = [
    "新增保障",
    "在保人数",
    "累计保障人数",
    "出险人数",
    "额外报销"
  ];
  trendLineDataOption.legend.data = overviewSelectedPanel.map(item => {
    return textNames[item - 1];
  });
  trendLineDataOption.xAxis.data = trendLineData.sections;

  const unitList = ["人", "人次", "人次", "人次", "元"];
  const unit = unitList[overviewSelectedPanel[0] - 1];
  trendLineDataOption.title.text = `趋势分析 (${unit})`;

  trendLineDataOption.series = overviewSelectedPanel.map(item => {
    // console.log("drugSelectedType[item]:", drugSelectedType[item]);
    return {
      name: textNames[item - 1],
      type: "line",
      data: trendLineData[overviewPanelType[item]]
    };
  });
  trendLineIns.clear();
  trendLineIns.setOption(trendLineDataOption as any);
}

// 首页概览数据
const indexValue = ref({
  newInsuranceCount: 0, //新增保障（人）
  inInsuranceCount: 0, //在保人数（人）
  cumulativeInsuredCount: 0, //累计保障人数（人）
  insuranceAccidentCount: 0, //出险人数（人次）
  reimbursementAmount: "0.00"
});

const iiMemberDataOption = reactive({
  title: {
    // text: "年龄分布",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      interval: 0
    }
  },
  yAxis: {
    type: "value"
  },
  label: {
    show: true,
    position: "top"
  },
  barWidth: "20",
  series: [
    {
      data: [0],
      type: "bar"
    }
  ]
});

function initMemberData(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(iiMemberDataOption as any);
  return getInstance();
}

async function getIIMemberData() {
  const cityId = destSelectRef.value.userSelectedRegions.cityId;
  const areaId = destSelectRef.value.userSelectedRegions.areaId;
  const baseUserSelectedRegions: Record<
    "provinceId" | "cityId" | "areaId",
    string
  > = {
    provinceId: destSelectRef.value.userSelectedRegions.provinceId,
    cityId,
    areaId
  };

  iiMemberData.value = await getInInsuranceData({
    ...baseUserSelectedRegions,
    startDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[0]
    ),
    endDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[1]
    )
  });
}

async function setInInsuranceBar() {
  iiMemberDataOption.xAxis.data = iiMemberData.value.ages?.map(item => {
    return item.title;
  }) || [0];
  iiMemberDataOption.series[0].data = iiMemberData.value.ages?.map(item => {
    return item.value;
  }) || [0];

  inInsuranceIns.setOption(iiMemberDataOption);
}

const comorbidityOption = reactive({
  title: {
    // text: "平均合并症个数：0个",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: "item"
  },
  legend: {
    bottom: "5%",
    left: "center",
    show: true
  },
  series: [
    {
      name: "合并症个数",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: "outside"
      },

      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: true
      },
      data: []
    }
  ]
});

function initComorbidityPie(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(comorbidityOption as any);
  return getInstance();
}

async function setComorbidityOption() {
  let memberNum = 0;
  let tempComorNum = 0;
  iiMemberData.value.complications?.forEach(item => {
    memberNum += Number(item.value);
    tempComorNum += Number(item.tValue) * Number(item.value);
  });

  avgComorbidityNum.value =
    Number((memberNum ? tempComorNum / memberNum : tempComorNum).toFixed(1)) ||
    0;
  // comorbidityOption.title.text = `平均合并症个数：${(memberNum
  //   ? tempComorNum / memberNum
  //   : tempComorNum
  // ).toFixed(1)}个`;
  comorbidityOption.series[0].data = iiMemberData.value.complications?.map(
    item => {
      return {
        value: item.value,
        name: item.title
      };
    }
  );
  comorbidityPieIns.setOption(comorbidityOption);
}

const diseaseDistributeOption = reactive({
  title: {
    // text: "出险居民疾病分布",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },

  xAxis: {
    type: "category",
    data: [
      "高血压",
      "糖尿病",
      "慢性缺血性心脏病",
      "高脂血症",
      "脑梗死",
      "急性心肌梗死",
      "脑血管病",
      "食管恶性肿瘤",
      "心里衰竭",
      "慢性阻塞性肺炎"
    ],
    axisLabel: {
      interval: 0
    }
  },
  yAxis: {
    type: "value"
  },
  barWidth: "20",
  series: [
    {
      data: store.mock === "1" ? [57, 32, 18, 12, 12, 11, 9, 9, 9, 5] : [],
      type: "bar",
      label: {
        show: true,
        formatter: "{c}%",
        position: "top"
      }
    }
  ]
});

function initDiseaseDistribute(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(diseaseDistributeOption as any);
  return getInstance();
}

async function setDiseaseDistributeData() {
  diseaseDistributeIns.setOption(diseaseDistributeOption);
}

const diseaseTrendOption = reactive({
  title: {
    // text: "出险居民年龄分布",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: {
    type: "category",
    data: ["40岁以下", "40-59岁", "60-79岁", "80岁及以上"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: store.mock === "1" ? [0, 0, 1, 4] : [],
      type: "bar",
      label: {
        show: true,
        position: "top"
      }
    }
  ],
  barWidth: "20"
});

function initDiseaseTrendChart(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(diseaseTrendOption as any);
  return getInstance();
}

async function setDiseaseTrendData() {
  const cityId = destSelectRef.value.userSelectedRegions.cityId;
  console.log("cityId:", cityId);
  const res = await getPresentSituationByMoney(
    "total_cost",
    destSelectRef.value.userSelectedRegions.cityId
  );
  diseaseTrendOption.xAxis.data = res.xaxis;
  diseaseTrendOption.series[0].data = res.series.map(item => {
    return Number(item);
  });
  diseaseTrendChartIns.setOption(diseaseMoneyOption);
}

const diseaseMoneyOption = {
  title: {
    // text: "保险报销金额分布",
    textStyle: {
      color: "#333",
      fontFamily: "PingFang SC",
      fontSize: "18px"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: "axis"
  },
  xAxis: {
    type: "category",
    data: ["5-10万", "10-20万", "20万-50万", "50万以上"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: store.mock === "1" ? [0, 4, 1, 0] : [],
      type: "bar",
      label: {
        show: true,
        position: "top"
      }
    }
  ],
  barWidth: "20"
};
function initDiseaseMoneyChart(elRef): echartsTypes.ECharts {
  const { setOptions, getInstance } = useECharts(elRef as Ref<HTMLDivElement>);
  setOptions(diseaseMoneyOption as any);
  return getInstance();
}

async function setDiseaseMoneyData() {
  const res = await getPresentSituationByMoney(
    "total_cost",
    destSelectRef.value.userSelectedRegions.cityId
  );
  diseaseMoneyOption.xAxis.data = res.xaxis;
  diseaseMoneyOption.series[0].data = res.series.map(item => {
    return Number(item);
  });
  diseaseMoneyChartIns.setOption(diseaseMoneyOption);
}

async function getTrendLine() {
  const cityId = destSelectRef.value.userSelectedRegions.cityId;
  const areaId = destSelectRef.value.userSelectedRegions.areaId;
  const baseUserSelectedRegions: Record<
    "provinceId" | "cityId" | "areaId",
    string
  > = {
    provinceId: destSelectRef.value.userSelectedRegions.provinceId,
    cityId,
    areaId
  };
  // 获取趋势数据
  const trendData = await getInsuranceTrendData({
    ...baseUserSelectedRegions,
    startDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[0]
    ),
    endDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[1]
    ),
    type: dateType.value
  });
  trendData.sections = trendData.sections.map(item => {
    if (item.includes("/")) {
      item = item.split("/")[0];
    }
    return item;
  });
  trendLineData = trendData;
}
async function initOverviewData() {
  const cityId = destSelectRef.value.userSelectedRegions.cityId;
  const areaId = destSelectRef.value.userSelectedRegions.areaId;
  const baseUserSelectedRegions: Record<
    "provinceId" | "cityId" | "areaId",
    string
  > = {
    provinceId: destSelectRef.value.userSelectedRegions.provinceId,
    cityId,
    areaId
  };

  // 初始化echart必须在 await之前，否则会报错
  indexValue.value = await getInsuranceOverview({
    ...baseUserSelectedRegions,
    startDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[0]
    ),
    endDate: formatDate(
      dateSelectRef.value && dateSelectRef.value.dateRangeValue[1]
    )
  });

  // 获取趋势分析数据
  await getTrendLine();
  // 在保居民数据
  await getIIMemberData();
}

async function initData() {
  // 重新获取概览数据
  // console.log("initData:", initData);
  await initOverviewData();
  setEchart();
}

function resizeChart() {
  inInsuranceIns.resize();
  comorbidityPieIns.resize();
  diseaseDistributeIns.resize();
  diseaseTrendChartIns.resize();
  diseaseMoneyChartIns.resize();
  trendLineIns.resize();
}

function initEchart() {
  trendLineIns = initTrendLine(trendLineRef);
}
function setEchart() {
  setTrendLineOption();
  setInInsuranceBar();
  setComorbidityOption();
  setDiseaseDistributeData();
  setDiseaseTrendData();
  setDiseaseMoneyData();
}

function destChange(cityObj) {
  globalDataStoreHook().CHANGE_CITY_ID(cityObj.cityId);
  initData();
}

function dateRangeChange() {
  initData();
}

onMounted(() => {
  // 初始化数据
  initData();
  initEchart();
  inInsuranceIns = initMemberData(memberDataRef);
  comorbidityPieIns = initComorbidityPie(trendPieRef);
  diseaseDistributeIns = initDiseaseDistribute(diseaseDistributeRef);
  diseaseTrendChartIns = initDiseaseTrendChart(diseaseTrendChartRef);
  diseaseMoneyChartIns = initDiseaseMoneyChart(diseaseMoneyChartRef);

  window.addEventListener("resize", resizeChart);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeChart);
});
</script>
<style scoped lang="scss">
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-select {
    margin-right: 20px;
  }

  .el-date-picker {
    margin-left: 20px;
  }
}

.p-cont {
  background-color: white;
  border-radius: 4px;

  .drug {
    .title {
      span {
        font-size: 24px;
      }
    }

    .user-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .up-item {
        border: 1px solid #eee;
        border-radius: 8px;
        width: 20%;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 130px;

        &.up-item-5 {
          width: 18%;
        }

        &.active {
          background-color: #4993fa;

          .up-des {
            color: white;
          }

          .up-num {
            color: white;
          }

          .up-inc {
            color: white;
          }
        }

        .up-des {
          @include panelSubTitle;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .up-num {
          @include panelBigTitle;
          margin-top: 10px;
        }

        .up-inc {
          @include panelThirdTitle;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;

          .up-inc-left {
            display: flex;
            align-items: center;
            width: 110px;
            justify-content: space-between;

            .green {
              color: #00a870;
            }

            .red {
              color: #e54d59;
            }
          }

          .up-inc-right {
            cursor: pointer;
          }
        }
      }
    }
  }

  .trend {
    margin-top: 30px;

    .trend-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tc-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }

      .tc-single {
        width: 100%;
      }

      .tc-left {
        width: 100%;
      }

      .tc-btn {
        text-align: left;
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }

      .tc-line {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }

      .tc-right {
        width: calc(30% - 20px);
        box-sizing: border-box;
        padding-top: 55px;
        border-left: 1px solid #eee;
        margin-top: 20px;
        margin-left: 40px;
        padding-left: 40px;

        .tc-r-item {
          width: 100%;
          height: 200px;
          box-sizing: border-box;
          padding-left: 20px;

          .tc-r-title {
            @include panelSubTitle;
          }

          .tc-r-num {
            @include panelBigTitle;
            margin-top: 20px;
          }

          .tc-r-inc {
            @include panelThirdTitle;
            display: flex;
            align-items: center;
            margin-top: 20px;
          }
        }
      }
    }
  }
}

.section {
  .title {
    span {
      font-size: 24px;
    }
  }

  .trend {
    .trend-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;

      .tc-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }

      .tc-single {
        width: 100%;
      }

      .tc-left {
        width: 50%;
      }

      .tc-btn {
        text-align: left;
        display: flex;
        justify-content: flex-end;
      }

      .tc-line {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }

      .tc-right {
        width: calc(50% - 20px);
        box-sizing: border-box;
        border-left: 1px solid #eee;
        margin-top: 20px;
        margin-left: 40px;
        padding-left: 40px;

        .trend-pie {
          height: 400px;
        }

        .tc-r-item {
          width: 100%;
          height: 200px;
          box-sizing: border-box;
          padding-left: 20px;

          .tc-r-title {
            font-size: 12px;
            color: #bbb;
          }

          .tc-r-num {
            font-size: 36px;
            color: black;
            margin-top: 20px;
          }

          .tc-r-inc {
            display: flex;
            align-items: center;
            margin-top: 20px;
          }
        }
      }
    }
  }

  .user-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .up-item {
      border: 1px solid #eee;
      border-radius: 8px;
      width: 24%;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 130px;

      &.hidden {
        visibility: hidden;
      }

      .up-des {
        @include panelSubTitle;
      }

      .up-num {
        @include panelBigTitle;
        margin-top: 10px;
      }

      .up-inc {
        @include panelThirdTitle;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;

        .up-inc-left {
          display: flex;
          align-items: center;
          width: 110px;
          justify-content: space-between;

          .green {
            color: #00a870;
          }

          .red {
            color: #e54d59;
          }
        }

        .up-inc-right {
          cursor: pointer;
        }
      }
    }
  }

  .chart {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.chart-one {
      display: block;
    }

    .now-analyse {
      width: 100%;
      height: 400px;
    }

    .chart-item {
      width: calc(50% - 20px);

      .ch-btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 60px;
        margin-bottom: 20px;
      }

      &.chart-flex-col {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;

        .ch-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100px;
          width: 100%;

          .ch-col-label {
            width: 120px;
            text-align: center;
          }

          .ch-col-pie {
            width: 120px;
            height: 120px;
          }
        }

        .ch-list {
          width: 100%;
        }
      }

      .ch-chart {
        height: 300px;
      }

      .ch-list {
        height: 300px;

        .ch-t-index {
          width: 24px;
          height: 24px;
          border-radius: 20px;
          display: inline-block;
          background: #0052d9;
          color: white;
          text-align: center;
          line-height: 24px;
        }

        .ch-t-cont {
          display: flex;
          align-items: center;

          .ch-t-bar {
            width: 150px;
            height: 12px;
            border-radius: 20px;
            background: #eee;

            .ch-t-bar-inner {
              height: inherit;
              background: #0052d9;
              border-radius: 20px;
            }
          }

          .ch-t-num {
            margin-left: 5px;
          }
        }
      }
    }
  }
}

.part2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  .section {
    width: calc(50% - 20px);

    .user-panel {
      .up-item {
        width: 49%;
        height: 130px;
      }
    }

    .chart {
      // margin-left: 40px;
      .chart-item {
        width: 100%;
      }
    }
  }
}

.chart-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}
</style>
